<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>更多设置</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../css/leftlist.css" />
	</head>
	<style>
		/*更多设置start*/
		
		.mui-table-view {
			background: none;
		}
		
		.szlist {
			background-color: #fff;
		}
		
		.mui-navigate-right:after,
		.mui-push-right:after {
			top: 50%;
		}
		
		.szlist3 {
			margin-top: 15px;
		}
		
		.mui-switch {
			right: 12px !important;
		}
		/*更多设置end*/
	</style>

	<body>

		<!--主界面菜单同时移动-->
		<!-- 侧滑导航根容器 -->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 菜单容器 -->
				<aside id="offCanvasSide" class="mui-off-canvas-left">
					<div id="left_scroll" class="mui-scroll-wrapper">
						<!--菜单内容开始-->
						<div class="mui-scroll">
							<!--头部-->
							<!--坑点: 不能把id定义在 mui-scroll中，不能将此当做父容器，需要重新定一个div作为父容器-->
							<div id="glz_slide">
								<leftlist :gl='gl' :items='items'></leftlist>
							</div>

						</div>
						<!--菜单内容结束-->
					</div>
				</aside>

				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
					<h1 class="mui-title">更多设置</h1>
				</header>

				<div id="home_scroll" class="mui-content mui-scroll-wrapper" style="margin-top: 23px;">
					<div class="mui-scroll" id="sz_app">

						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell szlist" :class="'szlist'+index" v-for="(item,index) in items">
								<a :href="item.nameurl" class="mui-navigate-right">{{item.name}}</a>

								<div v-show="item.nameurl == 'javascript:void(0)'" class="mui-switch mui-switch-mini mui-switch-blue" @click="isShow(index)" :class="{'mui-active':item.isShow}">
									<div class="mui-switch-handle"></div>
								</div>
							</li>

						</ul>

					</div>
				</div>
<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/vue2.5.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../components/leftlist.js"></script>
		<script type="text/javascript" src="../../js/globalVariable.js"></script>
		<script type="text/javascript">
			userInfo = getGlobalUserInfo();
			mui.init();
			var itemsdata = [{
					name: '菜单设置',
					nameurl: 'menu_settings.html'
				},
				//				{name:'锁屏设置',nameurl:'gesture.html'},
				//				{name:'通知设置',nameurl:'notification_settings.html'},
				//				{name:'下载设置',nameurl:'download_settings.html'},
				{
					name: '默认显示全部文件名',
					nameurl: 'javascript:void(0)',
					isShow: userInfo.isShowAllFilesName == undefined ? false : userInfo.isShowAllFilesName
				},
				{
					name: '用户信息',
					nameurl: 'information.html'
				},
				{
					name: '程序信息',
					nameurl: 'team_program_information.html'
				},
				//				{name:'帮助与反馈',nameurl:''},
			];

			var sz = new Vue({
				el: '#sz_app',
				data: function() {
					return {
						items: itemsdata,
					}
				},
				methods: {
					isShow: function(index, e) {
						this.items[index].isShow = !this.items[index].isShow;
						userInfo.isShowAllFilesName = this.items[index].isShow;
						setGlobalUserInfo(userInfo);
					}
				},
				mounted: function() {
					$(".mui-switch").on('tap', function(e) {
						this.click(e);
					});

				}

			})
			mui('#home_scroll').scroll();
			
			
		</script>
	</body>

</html>